<!--
 * @Author: liaoxing
 * @Date: 2021-08-30 10:11:16
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-31 11:40:23
 * @Description: file content
 * @FilePath: \数据中心\src\components\_Flvvideo\Flvvideo.vue
-->
<template>
  <div class="flvVideo">
    <video :id="id" class="videoElement" muted @loadeddata="videoLoadSuccess" :controls="canPlay"></video>
  </div>
</template>

<script>
export default {
  props: ['url', 'id'],
  name: 'flvVideo',
  data () {
    return {
      flvPlayer: null,
      canPlay: false,
      timeOut: null,
    }
  },
  watch: {
    url (val) {
      console.log(val)
      if (this.canPlay) {
        this.canPlay = false
      }
      if (this.flvPlayer) {
        this.flvPlayer.destroy()
        this.flvPlayer = null
      }
      this.createVideo()
    }
  },
  mounted () {
    console.log(this.url)
    this.createVideo()
    this.timeOut = setTimeout(() => {
      clearTimeout(this.timeOut)
      if (this.canPlay) {
        return
      }
      this.$message.error('视频流加载失败，请检查摄像头是否允许访问！')
    }, 10000)
  },
  methods: {
    createVideo () {
      if (window.flvjs.isSupported() && this.url) {
        var videoElement = document.getElementById(this.id);
        this.flvPlayer = window.flvjs.createPlayer({
          type: 'flv',
          url: this.url
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
        // this.canPlay = true
      }
    },
    videoLoadSuccess () {
      this.canPlay = true
    }
  },
  destroyed () {
    clearTimeout(this.timeOut)
    if (!this.flvPlayer) return
    this.flvPlayer.destroy()
    this.flvPlayer = null
  }
}
</script>

<style>
.flvVideo{
  height: 100%;
  width: 100%;
  background-color: black;
  position: relative;
  overflow: hidden;
}
.videoElement{
  height: 100%;
  width: 100%;
  /* width: 100%; */
  /* position: absolute;
  bottom: 0;
  width: 100%; */
}
</style>